<template>
  <div>
    <span v-if="timeShow">{{ timeShow }}</span>
    {{ obj }}
    {{ radioList }}
    <div class="table_box">
      <el-button link type="primary" size="small" @click="handlerAddEdit()">新增</el-button>
      <el-table :data="topData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }">
        <el-table-column prop="time" label="Date" width="180" align="center" header-align="center" />
        <el-table-column prop="names" label="Name" width="180" align="center" header-align="center" />
        <el-table-column prop="arithmetic" label="Address" align="center" header-align="center" />
        <el-table-column prop="flag" label="状态" align="center" header-align="center">
          <template #default="scope">
            <el-button type="primary" v-if="scope.row.flag == '1'">开启</el-button>
            <el-button type="primary" v-if="scope.row.flag == '0'">关闭</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handlerAddEdit(scope.row)">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <el-select v-model="cityValue" @change="changeValue" class="m-2" placeholder="Select" size="small">
      <el-option v-for="item in cityData" :key="item.value" :label="item.name" :value="item.name" />
    </el-select> -->
    <br/>
    <el-button @click="callChildFn" type="primary">调用子组件的方法</el-button>
    <br>
    <h5>下面是子组件传递给父组件的值：</h5>
    <div>msg:{{ msg }}</div>
    <div>msgT:{{ msgT }}</div>
    <AboutChild :obj="obj" :radioList="radioList" @myClick="onMyClick" @twoClick="twoMyClick" @updateClick="updateClick" ref="aboutChildRef"></AboutChild>
    <br/>
    <childTwo></childTwo>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted,nextTick,provide } from "vue";
import { ElTable, ElTableColumn, ElButton, ElSelect } from 'element-plus';
import AboutChild from "@/components/AboutChild.vue";
import childTwo from "@/components/childTwo.vue";
import request from "@/untils/request1";
let timeShow = ref(true)
let obj = reactive({
  list: [
    {
      id: 1,
      name: "11111111"
    }
  ]
})
let radioList = reactive([
  { name: "日战报", value: "1" },
  { name: "当周", value: "2" },
  { name: "当月", value: "3" },
]);
let topData = reactive([
  {
    ranking: "1",
    time: "2022-05-20",
    names: "智能家居",
    arithmetic: "GRU算法",
    flag: "1",
    id:1,
  },
  {
    ranking: "2",
    time: "2022-05-20",
    names: "智能门锁",
    arithmetic: "SEQ算法",
    flag: "0",
    id:2,
  },
  {
    ranking: "3",
    time: "2022-05-20",
    names: "全光组网",
    arithmetic: "深度学习算法",
    flag: "0",
    id:3,
  },
  {
    ranking: "4",
    time: "2022-05-20",
    names: "套餐低签",
    arithmetic: "FASTTEST算法1111111",
    flag: "1",
    id:4,
  },
  {
    ranking: "5",
    time: "2022-05-20",
    names: "天翼看家",
    arithmetic: "深度网络算法111111111",
    flag: "1",
    id:5,
  },
  {
    ranking: "6",
    time: "2022-05-20",
    names: "携号转出",
    arithmetic: "GRU算法",
    flag: "1",
    id:6,
  },
  {
    ranking: "7",
    time: "2022-05-20",
    names: "携号转出",
    arithmetic: "SEQ算法",
    flag: "1",
    id:7,
  },
  {
    ranking: "8",
    time: "2022-05-20",
    names: "移机搬家",
    arithmetic: "GRU算法",
    flag: "1",
    id:8,
  },
  {
    ranking: "9",
    time: "2022-05-20",
    names: "智能门禁1",
    arithmetic: "深度网络算法1",
    flag: "1",
    id:9,
  },
])
let cityData = reactive([
  {
    value: "265",
    name: "合肥市",
    itemStyle: { normal: { areaColor: "#ff0000" } },
  },
  {
    value: "563",
    name: "宣城市",
    itemStyle: { normal: { areaColor: "#ffff33" } },
  },
  {
    value: "552",
    name: "蚌埠市",
    itemStyle: { normal: { areaColor: "#ffff33" } },
  },
  {
    value: "564",
    name: "六安市",
    itemStyle: { normal: { areaColor: "#ffff33" } },
  },
  {
    value: "553",
    name: "芜湖市",
    itemStyle: { normal: { areaColor: "#d99694" } },
  },
  {
    value: "554",
    name: "淮南市",
    itemStyle: { normal: { areaColor: "#d99694" } },
  },
  {
    value: "566",
    name: "池州市",
    itemStyle: { normal: { areaColor: "#edd900" } },
  },
  {
    value: "555",
    name: "马鞍山市",
    itemStyle: { normal: { areaColor: "#d99694" } },
  },
  {
    value: "556",
    name: "安庆市",
    itemStyle: { normal: { areaColor: "#d99694" } },
  },
  {
    value: "557",
    name: "宿州市",
    itemStyle: { normal: { areaColor: "#edd900" } },
  },
  {
    value: "558",
    name: "阜阳市",
    itemStyle: { normal: { areaColor: "#0070bc" } },
  },
  {
    value: "560",
    name: "亳州市",
    itemStyle: { normal: { areaColor: "#0070bc" } },
  },
  {
    value: "559",
    name: "黄山市",
    itemStyle: { normal: { areaColor: "#0070bc" } },
  },
  {
    value: "550",
    name: "滁州市",
    itemStyle: { normal: { areaColor: "#0070bc" } },
  },
  {
    value: "561",
    name: "淮北市",
    itemStyle: { normal: { areaColor: "#0070bc" } },
  },
  {
    value: "1562",
    name: "铜陵市",
    itemStyle: { normal: { areaColor: "#0070bc" } },
  },
])
let cityValue = ref("")
let msg = ref("")
let msgT = ref("")
let aboutChildRef = ref(null)
const getCallNum = () => {
  //  request({
  //   url: `/robotAccept/clearQrCode`,
  //   type: "get",
  // }).then(({ data }) => {
  //   console.log(data);
  //   if (data.code === 0) {
  //     this.callNum = data.data[1].toString();
  //     this.zhanYi = data.data[0];
  //   }
  // });
}
const changeValue = () => {
  console.log("---cityValue-", cityValue.value);
}
const handlerAddEdit = async (obj) => {
  // console.log("obj===",obj);
  aboutChildRef.value.initTwo(obj)
  // for (var i = 0; i < topData.length; i++) {
  //   if (topData[i].ranking === obj.ranking) {
  //     await nextTick(() => {
  //       Reflect.set(topData[i], "flag", "1");
  //     })
  //   }
  // }
}
const onMyClick = (value) => {
  console.log("---value-", value);
  msg.value = value;
}
const twoMyClick = (value) => {
  console.log("---value-", value);
  msgT.value = value;
}
const updateClick = async (data) => {
  console.log("---data-", data);
  for (var i = 0; i < topData.length; i++) {
    if (topData[i].id === data.id) {
      await nextTick(() => {
        Reflect.set(topData[i], "flag", data.flag);
      })
    }
  }
  // msgT.value = value;
}
//调取子组件方法
const callChildFn = (value) => {
  aboutChildRef.value.init()
}
const namePro = ref('猛虎下山')
const msgPro = ref("你哦就奥数")
provide('msgPros', msgPro)
onMounted(() => {
  getCallNum()
})
</script>
<style>
.table_box {
  width: 50%;
  height: 200px;
  overflow-y: auto;
}
</style>
